<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Kindle电子时钟</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#000000',
                        secondary: '#333333',
                        accent: '#666666',
                        background: '#FFFFFF',
                        light: '#E0E0E0',
                        dark: '#222222',
                    },
                    fontFamily: {
                        sans: ['Helvetica', 'Arial', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .clock-font {
                font-family: 'Courier New', monospace;
            }
            .kindle-screen {
                max-width: 100%;
                height: auto;
                aspect-ratio: 3/4;
                box-shadow: 0 0 20px rgba(0,0,0,0.1);
                border-radius: 8px;
            }
            .date-font {
                font-family: 'SimHei', 'WenQuanYi Micro Hei', 'Heiti TC', sans-serif;
            }
            .sun-pixel {
                transition: all 1s ease-in-out;
            }
            .sky-day {
                background-color: #E0E0E0;
            }
            .sky-night {
                background-color: #222222;
            }
            .orbit {
                position: absolute;
                border: 1px solid #999;
                border-radius: 50%;
                pointer-events: none;
            }
        }
    </style>
</head>
<body class="bg-gray-100 min-h-screen flex items-center justify-center p-4">
    <div class="kindle-screen bg-background text-primary flex flex-col items-center justify-center">
        <!-- 标题 -->
        <div class="text-center mb-8 w-full px-4">
            <h1 class="text-2xl font-bold mb-2">Kindle电子时钟</h1>
            <p class="text-accent text-sm">适配Kindle Paperwhite屏幕</p>
        </div>
        
        <!-- 时钟显示区域 -->
        <div class="mb-10 text-center w-full px-4">
            <div id="time" class="clock-font text-[clamp(2rem,8vw,6rem)] font-bold tracking-wider mb-2">00:00</div>
            <div id="date" class="date-font text-xl mb-1">2025年6月20日 星期五</div>
            <div id="lunar" class="date-font text-lg text-secondary">甲辰年五月廿五</div>
            <div id="location" class="date-font text-sm text-accent mt-1">北京时间 (GMT+8)</div>
        </div>
        
        <!-- 太阳位置动画 -->
        <div class="mt-4 mb-8 w-full max-w-xs mx-auto relative h-[25vh] min-h-[150px] max-h-[300px]">
            <!-- 天空背景 -->
            <div id="sky" class="w-full h-full rounded-lg overflow-hidden relative">
                <!-- 太阳运行轨迹 -->
                <div id="orbit" class="orbit"></div>
                
                <!-- 太阳/月亮 -->
                <div id="celestial-body" class="absolute w-6 h-6"></div>
                
                <!-- 地平线 -->
                <div class="absolute bottom-0 left-0 w-full h-2 bg-gray-500"></div>
                
                <!-- 时间提示 -->
                <div class="absolute bottom-4 left-0 w-full text-center text-xs text-gray-600">
                    <span id="sun-status">日出: 05:30 | 日落: 19:30</span>
                </div>
            </div>
        </div>
        
        <!-- 底部信息 -->
        <div class="mt-auto mb-4 text-xs text-center text-gray-400 w-full px-4">
            <p id="last-update">上次更新: 2025-06-20 15:30</p>
            <p>每小时自动刷新 | 电子时钟 v1.0</p>
        </div>
    </div>

    <script>
        // 农历计算库
        function LunarCalendar() {
            // 农历数据（1900-2100年）
            this.lunarInfo = [
                0x04bd8, 0x04ae0, 0x0a570, 0x054d5, 0x0d260, 0x0d950, 0x16554, 0x056a0, 0x09ad0, 0x055d2,
                0x04ae0, 0x0a5b6, 0x0a4d0, 0x0d250, 0x1d255, 0x0b540, 0x0d6a0, 0x0ada2, 0x095b0, 0x14977,
                0x04970, 0x0a4b0, 0x0b4b5, 0x06a50, 0x06d40, 0x1ab54, 0x02b60, 0x09570, 0x052f2, 0x04970,
                0x06566, 0x0d4a0, 0x0ea50, 0x06e95, 0x05ad0, 0x02b60, 0x186e3, 0x092e0, 0x1c8d7, 0x0c950,
                0x0d4a0, 0x1d8a6, 0x0b550, 0x056a0, 0x1a5b4, 0x025d0, 0x092d0, 0x0d2b2, 0x0a950, 0x0b557,
                0x06ca0, 0x0b550, 0x15355, 0x04da0, 0x0a5d0, 0x14573, 0x052d0, 0x0a9a8, 0x0e950, 0x06aa0,
                0x0aea6, 0x0ab50, 0x04b60, 0x0aae4, 0x0a570, 0x05260, 0x0f263, 0x0d950, 0x05b57, 0x056a0,
                0x096d0, 0x04dd5, 0x04ad0, 0x0a4d0, 0x0d4d4, 0x0d250, 0x0d558, 0x0b540, 0x0b6a0, 0x195a6,
                0x095b0, 0x049b0, 0x0a974, 0x0a4b0, 0x0b27a, 0x06a50, 0x06d40, 0x0af46, 0x0ab60, 0x09570,
                0x04af5, 0x04970, 0x064b0, 0x074a3, 0x0ea50, 0x06b58, 0x055c0, 0x0ab60, 0x096d5, 0x092e0,
                0x0c960, 0x0d954, 0x0d4a0, 0x0da50, 0x07552, 0x056a0, 0x0abb7, 0x025d0, 0x092d0, 0x0cab5,
                0x0a950, 0x0b4a0, 0x0baa4, 0x0ad50, 0x055d9, 0x04ba0, 0x0a5b0, 0x15176, 0x052b0, 0x0a930,
                0x07954, 0x06aa0, 0x0ad50, 0x05b52, 0x04b60, 0x0a6e6, 0x0a4e0, 0x0d260, 0x0ea65, 0x0d530,
                0x05aa0, 0x076a3, 0x096d0, 0x04bd7, 0x04ad0, 0x0a4d0, 0x1d0b6, 0x0d250, 0x0d520, 0x0dd45,
                0x0b5a0, 0x056d0, 0x055b2, 0x049b0, 0x0a577, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0,
                0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x1a6c4, 0x0aae0,
                0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4,
                0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0,
                0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160,
                0x0e968, 0x0d4a0, 0x0da50, 0x15a5d, 0x056a0, 0x096d0, 0x04afd, 0x04ad0, 0x0a4d0, 0x0d0b6,
                0x0d250, 0x0d520, 0x0dd45, 0x0b5a0, 0x056d0, 0x04ad2, 0x049b0, 0x0a5b6, 0x0a4b0, 0x0aa50,
                0x1b255, 0x06d20, 0x0ada0, 0x14b63, 0x09370, 0x049f8, 0x04970, 0x064b0, 0x168a6, 0x0ea50,
                0x06b20, 0x0a6c4, 0x0aae0, 0x0a2e0, 0x0d2e3, 0x0c960, 0x0d557, 0x0d4a0, 0x0da50, 0x05d55,
                0x056a0, 0x0a6d0, 0x055d4, 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0, 0x0b6a6, 0x0ad50, 0x055a0,
                0x0aba4, 0x0a5b0, 0x052b0, 0x0b273, 0x06930, 0x07337, 0x06aa0, 0x0ad50, 0x14b55, 0x04b60,
                0x0a570, 0x054e4, 0x0d160, 0x0e968, 0x0d4a0, 0x0da50, 0x15a5d, 0x056a0, 0x096d0, 0x04afd,
                0x04ad0, 0x0a4d0, 0x0d0b6, 0x0d250, 0x0d950, 0x055a8, 0x056a0, 0x096d0, 0x04ad2, 0x049b0,
                0x0a5b6, 0x0a4b0, 0x0aa50, 0x1b255, 0x06d20, 0x0ada0, 0x14b63, 0x09370, 0x049f8, 0x04970,
                0x064b0, 0x168a6, 0x0ea50, 0x06b20, 0x0a6c4, 0x0aae0, 0x0a2e0, 0x0d2e3, 0x0c960, 0x0d54e,
                0x0d4a0, 0x0da50, 0x05d55, 0x056a0, 0x0a6d0, 0x055d4, 0x052d0, 0x0a9b8, 0x0a950, 0x0b4a0,
                0x0b6a6, 0x0ad50, 0x055a0, 0x0aba4, 0x0a5b0, 0x052b0, 0x0b273, 0x06930, 0x07337, 0x06aa0,
                0x0ad50, 0x14b55, 0x04b60, 0x0a570, 0x054e4, 0x0d160, 0x0e968, 0x0d4a0, 0x0da50, 0x15a5d
            ];
            
            // 天干
            this.TGAN = ['甲', '乙', '丙', '丁', '戊', '己', '庚', '辛', '壬', '癸'];
            // 地支
            this.DZHI = ['子', '丑', '寅', '卯', '辰', '巳', '午', '未', '申', '酉', '戌', '亥'];
            // 生肖
            this.SHENGXIAO = ['鼠', '牛', '虎', '兔', '龙', '蛇', '马', '羊', '猴', '鸡', '狗', '猪'];
            // 农历月份
            this.MONTH_NAME = ['', '正月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '冬月', '腊月'];
            // 农历日
            this.DAY_NAME = ['', '初一', '初二', '初三', '初四', '初五', '初六', '初七', '初八', '初九', '初十', 
                            '十一', '十二', '十三', '十四', '十五', '十六', '十七', '十八', '十九', '二十', 
                            '廿一', '廿二', '廿三', '廿四', '廿五', '廿六', '廿七', '廿八', '廿九', '三十'];
            
            // 农历转换
            this.solarToLunar = function(date) {
                try {
                    let year = date.getFullYear();
                    let month = date.getMonth() + 1;
                    let day = date.getDate();
                    
                    if (year < 1900 || year > 2100) {
                        throw new Error('年份超出范围（1900-2100）');
                    }
                    
                    let offset = (year - 1900) * 12 + month - 1;
                    let leapMonth = (this.lunarInfo[year - 1900] & 0xf);
                    
                    let dayCount = 0;
                    for (let i = 1900; i < year; i++) {
                        dayCount += this.getYearDays(i);
                    }
                    
                    for (let i = 1; i < month; i++) {
                        dayCount += this.getMonthDays(year, i);
                    }
                    
                    dayCount += day;
                    
                    let lunarYear, lunarMonth, lunarDay;
                    lunarYear = 1900;
                    
                    while (dayCount > 0) {
                        let days = this.getYearDays(lunarYear);
                        if (dayCount <= days) {
                            break;
                        }
                        dayCount -= days;
                        lunarYear++;
                    }
                    
                    let isLeap = false;
                    lunarMonth = 0;
                    
                    while (dayCount > 0) {
                        let days = this.getMonthDays(lunarYear, lunarMonth + 1);
                        
                        if (isLeap) {
                            days = this.getLeapMonthDays(lunarYear);
                            if (days === 0) {
                                isLeap = false;
                                continue;
                            }
                        }
                        
                        dayCount -= days;
                        
                        if (dayCount <= 0) {
                            break;
                        }
                        
                        if (lunarMonth + 1 === leapMonth && !isLeap) {
                            isLeap = true;
                            lunarDay = dayCount + days;
                        } else {
                            lunarMonth++;
                            lunarDay = dayCount + days;
                        }
                    }
                    
                    // 确保计算结果在有效范围内
                    lunarMonth = Math.max(1, Math.min(12, lunarMonth + 1));
                    lunarDay = Math.max(1, Math.min(30, lunarDay));
                    
                    let tgIndex = (lunarYear - 4) % 10;
                    let dzIndex = (lunarYear - 4) % 12;
                    let sxIndex = dzIndex;
                    
                    return {
                        year: lunarYear,
                        month: lunarMonth,
                        day: lunarDay,
                        isLeap: isLeap,
                        tianGan: this.TGAN[tgIndex],
                        diZhi: this.DZHI[dzIndex],
                        shengXiao: this.SHENGXIAO[sxIndex],
                        yearName: this.TGAN[tgIndex] + this.DZHI[dzIndex] + '年',
                        monthName: this.MONTH_NAME[lunarMonth],
                        dayName: this.DAY_NAME[lunarDay],
                        fullName: this.TGAN[tgIndex] + this.DZHI[dzIndex] + '年' + 
                                 (isLeap ? '闰' : '') + this.MONTH_NAME[lunarMonth] + 
                                 this.DAY_NAME[lunarDay]
                    };
                } catch (error) {
                    console.error('农历转换错误:', error);
                    return {
                        fullName: '农历计算错误'
                    };
                }
            };
            
            // 获取某年的天数
            this.getYearDays = function(y) {
                let sum = 348;
                for (let i = 0x8000; i > 0x8; i >>= 1) {
                    sum += (this.lunarInfo[y - 1900] & i) ? 1 : 0;
                }
                return sum + this.getLeapMonthDays(y);
            };
            
            // 获取某年闰月的天数
            this.getLeapMonthDays = function(y) {
                if (this.getLeapMonth(y)) {
                    return (this.lunarInfo[y - 1900] & 0x10000) ? 30 : 29;
                } else {
                    return 0;
                }
            };
            
            // 获取某年闰哪个月
            this.getLeapMonth = function(y) {
                return this.lunarInfo[y - 1900] & 0xf;
            };
            
            // 获取某年某月的天数
            this.getMonthDays = function(y, m) {
                return (this.lunarInfo[y - 1900] & (0x10000 >> m)) ? 30 : 29;
            };
        }

        // 根据北京地理位置计算太阳/月亮位置和状态
        function calculateCelestialPosition(date) {
            try {
                // 北京的纬度约为39.9°N，经度约为116.4°E
                // 简化的日出日落计算，考虑北京的地理位置特点
                const month = date.getMonth();
                const day = date.getDate();
                
                // 春分(3月20日左右)、夏至(6月21日左右)、秋分(9月23日左右)、冬至(12月22日左右)
                const springEquinox = new Date(date.getFullYear(), 2, 20);
                const summerSolstice = new Date(date.getFullYear(), 5, 21);
                const autumnEquinox = new Date(date.getFullYear(), 8, 23);
                const winterSolstice = new Date(date.getFullYear(), 11, 22);
                
                // 计算当前日期与节气的相对位置
                const daysSinceSpring = Math.floor((date - springEquinox) / (1000 * 60 * 60 * 24));
                const daysSinceSummer = Math.floor((date - summerSolstice) / (1000 * 60 * 60 * 24));
                const daysSinceAutumn = Math.floor((date - autumnEquinox) / (1000 * 60 * 60 * 24));
                const daysSinceWinter = Math.floor((date - winterSolstice) / (1000 * 60 * 60 * 24));
                
                // 北京地区日出日落时间模型
                let sunriseHour, sunsetHour;
                
                if (daysSinceSpring >= 0 && daysSinceSpring < 93) { // 春分到夏至
                    // 日出时间从6:00逐渐提前到4:45
                    // 日落时间从18:00逐渐推迟到19:45
                    sunriseHour = 6 - (daysSinceSpring / 93) * 1.25;
                    sunsetHour = 18 + (daysSinceSpring / 93) * 1.75;
                } else if (daysSinceSummer >= 0 && daysSinceSummer < 93) { // 夏至到秋分
                    // 日出时间从4:45逐渐推迟到6:00
                    // 日落时间从19:45逐渐提前到18:00
                    sunriseHour = 4.75 + (daysSinceSummer / 93) * 1.25;
                    sunsetHour = 19.75 - (daysSinceSummer / 93) * 1.75;
                } else if (daysSinceAutumn >= 0 && daysSinceAutumn < 90) { // 秋分到冬至
                    // 日出时间从6:00逐渐推迟到7:30
                    // 日落时间从18:00逐渐提前到16:30
                    sunriseHour = 6 + (daysSinceAutumn / 90) * 1.5;
                    sunsetHour = 18 - (daysSinceAutumn / 90) * 1.5;
                } else { // 冬至到春分
                    // 日出时间从7:30逐渐提前到6:00
                    // 日落时间从16:30逐渐推迟到18:00
                    const daysSinceWinterAdj = (daysSinceWinter + 365) % 365; // 处理跨年问题
                    sunriseHour = 7.5 - (daysSinceWinterAdj / 90) * 1.5;
                    sunsetHour = 16.5 + (daysSinceWinterAdj / 90) * 1.5;
                }
                
                const currentHour = date.getHours() + date.getMinutes() / 60;
                const totalDaylightHours = sunsetHour - sunriseHour;
                
                // 计算在24小时周期中的位置（0-1），调整为从日出开始
                let position = ((currentHour - sunriseHour) % 24 + 24) % 24 / 24;
                
                let celestialStatus = '夜晚';
                let skyClass = 'sky-night';
                
                if (currentHour >= sunriseHour && currentHour <= sunsetHour) {
                    // 白天
                    celestialStatus = '白天';
                    skyClass = 'sky-day';
                } else {
                    // 夜晚
                    celestialStatus = '夜晚';
                    skyClass = 'sky-night';
                }
                
                return {
                    position: position,
                    status: celestialStatus,
                    skyClass: skyClass,
                    sunrise: formatTime(sunriseHour),
                    sunset: formatTime(sunsetHour)
                };
            } catch (error) {
                console.error('计算天体位置错误:', error);
                return {
                    position: 0.5,
                    status: '计算错误',
                    skyClass: 'sky-day',
                    sunrise: '06:00',
                    sunset: '18:00'
                };
            }
        }
        
        // 格式化时间
        function formatTime(hour) {
            const h = Math.floor(hour);
            const m = Math.round((hour - h) * 60);
            return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
        }

        // 创建太阳带光芒的像素图形
        function createSunWithRays() {
            const sun = document.createElement('div');
            sun.className = 'relative w-full h-full';
            
            // 太阳本体
            const sunBody = document.createElement('div');
            sunBody.className = 'absolute inset-0 bg-black rounded-full';
            sun.appendChild(sunBody);
            
            // 光芒（使用黑白像素模拟）
            const rays = [
                { top: -4, left: 1, width: 4, height: 2 }, // 上
                { top: 1, left: -4, width: 2, height: 4 }, // 左
                { top: 7, left: 1, width: 4, height: 2 }, // 下
                { top: 1, left: 7, width: 2, height: 4 }, // 右
                { top: -2, left: -2, width: 2, height: 2 }, // 左上
                { top: -2, left: 7, width: 2, height: 2 }, // 右上
                { top: 7, left: -2, width: 2, height: 2 }, // 左下
                { top: 7, left: 7, width: 2, height: 2 }  // 右下
            ];
            
            rays.forEach(ray => {
                const rayElement = document.createElement('div');
                rayElement.className = 'absolute bg-black';
                rayElement.style.top = `${ray.top}px`;
                rayElement.style.left = `${ray.left}px`;
                rayElement.style.width = `${ray.width}px`;
                rayElement.style.height = `${ray.height}px`;
                sun.appendChild(rayElement);
            });
            
            return sun;
        }

        // 创建月亮（月牙）的像素图形
        function createMoon() {
            const moon = document.createElement('div');
            moon.className = 'relative w-full h-full';
            
            // 月亮本体
            const moonBody = document.createElement('div');
            moonBody.className = 'absolute inset-0 bg-white border border-black rounded-full';
            moon.appendChild(moonBody);
            
            // 月牙效果（用黑色圆形覆盖部分白色圆形）
            const crescent = document.createElement('div');
            crescent.className = 'absolute top-1 left-1 w-4 h-4 bg-black rounded-full';
            moon.appendChild(crescent);
            
            return moon;
        }

        // 更新太阳/月亮位置动画
        function updateCelestialAnimation(date) {
            try {
                const celestialInfo = calculateCelestialPosition(date);
                const sky = document.getElementById('sky');
                const celestialBody = document.getElementById('celestial-body');
                const sunStatus = document.getElementById('sun-status');
                const orbit = document.getElementById('orbit');
                
                // 设置天空颜色
                sky.className = 'w-full h-full rounded-lg overflow-hidden relative';
                sky.classList.add(celestialInfo.skyClass);
                
                // 计算并设置轨迹大小
                const skyWidth = sky.offsetWidth;
                const skyHeight = sky.offsetHeight;
                const centerX = skyWidth / 2;
                const centerY = skyHeight / 2;
                const radius = Math.min(skyWidth, skyHeight) * 0.4;
                
                // 设置轨迹大小和位置
                orbit.style.width = `${radius * 2}px`;
                orbit.style.height = `${radius * 2}px`;
                orbit.style.left = `${centerX - radius}px`;
                orbit.style.top = `${centerY - radius}px`;
                
                // 清空现有内容
                while (celestialBody.firstChild) {
                    celestialBody.removeChild(celestialBody.firstChild);
                }
                
                // 根据位置决定显示太阳还是月亮
                if (celestialInfo.position >= 0 && celestialInfo.position <= 0.5) {
                    // 上半圆，显示太阳
                    celestialBody.appendChild(createSunWithRays());
                } else {
                    // 下半圆，显示月亮
                    celestialBody.appendChild(createMoon());
                }
                
                // 角度计算（0-2π），调整为从东方开始
                const angle = (celestialInfo.position * Math.PI * 2) - (Math.PI / 2);
                
                // 圆周运动位置计算，确保太阳圆心精确位于轨迹上
                const x = centerX + radius * Math.cos(angle);
                const y = centerY + radius * Math.sin(angle);
                
                // 设置天体位置，考虑元素自身尺寸的居中
                const celestialSize = celestialBody.offsetWidth;
                celestialBody.style.left = `${x - (celestialSize / 2)}px`;
                celestialBody.style.top = `${y - (celestialSize / 2)}px`;
                
                // 更新状态文本
                sunStatus.textContent = `日出: ${celestialInfo.sunrise} | 日落: ${celestialInfo.sunset}`;
            } catch (error) {
                console.error('更新天体动画错误:', error);
            }
        }

        // 更新时间和农历信息
        function updateDateTime() {
            try {
                // 使用北京时间（GMT+8）
                const now = new Date();
                const beijingTime = new Date(now.getTime() + (now.getTimezoneOffset() * 60000) + (8 * 3600000));
                
                const lunar = new LunarCalendar();
                const lunarDate = lunar.solarToLunar(beijingTime);
                
                // 更新时间（只显示小时和分钟）
                const hours = String(beijingTime.getHours()).padStart(2, '0');
                const minutes = String(beijingTime.getMinutes()).padStart(2, '0');
                document.getElementById('time').textContent = `${hours}:${minutes}`;
                
                // 更新日期
                const year = beijingTime.getFullYear();
                const month = beijingTime.getMonth() + 1;
                const date = beijingTime.getDate();
                const weekday = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'][beijingTime.getDay()];
                document.getElementById('date').textContent = `${year}年${month}月${date}日 ${weekday}`;
                
                // 更新农历
                document.getElementById('lunar').textContent = lunarDate.fullName;
                
                // 更新最后更新时间
                document.getElementById('last-update').textContent = `上次更新: ${year}-${String(month).padStart(2, '0')}-${String(date).padStart(2, '0')} ${hours}:${minutes}`;
                
                // 更新太阳/月亮动画
                updateCelestialAnimation(beijingTime);
            } catch (error) {
                console.error('更新时间失败:', error);
                document.getElementById('time').textContent = '时间更新错误';
                document.getElementById('date').textContent = '日期更新错误';
                document.getElementById('lunar').textContent = '农历更新错误';
            }
        }

        // 初始化函数
        function init() {
            try {
                // 初始化时间、农历和太阳/月亮动画
                updateDateTime();
                
                // 每分钟更新一次
                setInterval(updateDateTime, 60000);
                
                // 窗口大小变化时重新计算轨迹
                window.addEventListener('resize', function() {
                    // 添加防抖处理，避免频繁计算
                    clearTimeout(window.resizeTimeout);
                    window.resizeTimeout = setTimeout(function() {
                        updateCelestialAnimation(new Date());
                    }, 200);
                });
            } catch (error) {
                console.error('初始化失败:', error);
                document.getElementById('time').textContent = '初始化错误';
                document.getElementById('date').textContent = '请检查控制台错误信息';
                document.getElementById('lunar').textContent = '';
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', init);
    </script>
</body>
</html>    